<template>
    <div class="app-recommend" >
        <!-- <div class="app-box"> -->
            <div class="row-image recommend-header">
                    <a href="#" class="item">
                        <img :src="RecommendHeader" alt="">
                    </a>
                </div>
                <ul class="recommand-main" >
                    <router-link tag="li" v-for="(RecommendMain,index) in RecommendMains" :to="{name: 'plist',query:{goodsId: RecommendMain.goodsId}}" class="item"  :key="index">
                        <img :src="RecommendMain.imageUrl" alt="">
                        <div class="text">
                            <p>{{RecommendMain.title}}</p>
                            <div>
                                <span>￥</span><em>{{RecommendMain.currentPrice}}</em>
                            </div>
                        </div>
                    </router-link>
        

                </ul>
        <!-- </div> -->
    
    </div>
</template>
<script>
    import {mapActions,mapGetters,mapMutations,mapState} from "vuex"
    import BScroll from 'better-scroll'
    import axios from "utils/http"
    import {Indicator,Toast} from "mint-ui";

    export default {
        data(){
            return {
                result: null,
                page: 5 ,
            }
        },
        computed: {
            ...mapGetters("Recommend",[
                "RecommendHeader",
                "RecommendMains",
            ])
        },
    //     async created(){
    //     //  Indicator.open({
    //     //     text: "加载中...",
    //     //     spinnerType: "fading-circle"

    //     // });
        
    //     this.result =  await axios({
    //         method: "get",
    //         url: "/home/index.html",
    //         params: {
    //             pageNo: this.page-1
    //         }
    //     })
    //     let action = {
    //         type: "Recommend",
    //         payload: this.result.data.home
    //     }    

    //     this.$store.commit("Recommend/Recommend",action)   
    //     // Indicator.close();

    // },
    // watch: {
    //     result(){
    //         let bscroll =  new BScroll(".app-recommend",{
    //             pullUpLoad: {
    //                 threshold: 30
    //             }
    //         });
          

    //         bscroll.on("pullingUp", async ()=>{
                
    //             if(this.page<15){
                   
    //                 let res = await axios({
    //                     method: "get",
    //                     url: "/home/index.html",
    //                     params: {
    //                         t: new Date().getTime(),
    //                         pageNo: this.page
    //                     }
    //                 })
    //                 let action = {
    //                     type: "RecommendMore",
    //                     payload: this.result.data.home
    //                 }          
            
    //                 // this.result.push(res)
    //                 // console.log("this.page",this.page)
                    
    //                 this.$store.commit("Recommend/RecommendMore",action) 
    //                 bscroll.finishPullUp(); 
    //                 this.page ++     
                      
    //             }
                 
                
    //             if(this.page == 15){
    //                 Toast({
    //                     message: 'Upload Complete',
    //                     position: 'bottom',
    //                     duration: 1000
    //                 });
    //             }
                
    //         }); 
       
    //     }
    // },

    }
</script>
<style lang="stylus" scoped>
    .app-recommend
        flex 1
        
        // height 6.23rem
        ul
            padding .05rem
            background #f2f2f2
            display flex
            flex-wrap wrap

            li
                width 1.70587rem
                padding .03502rem 0
                margin .05rem
                border 1px solid #ececec
                border-radius .04002rem
                background #fff
                img
                    width 100%
                .text
                    margin .02501rem .08004rem
                    font-size .14rem
                    line-height .18rem
                    p

                        height .3601rem
                        margin-top .1rem
                        font-size .14rem
                        line-height .18rem      
                        //两行显示，超出省略号
                        display -webkit-box            
                        -webkit-line-clamp 2
                        -webkit-box-orient vertical
                        text-overflow ellipsis
                        overflow hidden
                    div
                        font-size .17rem
                        color red
                        display flex
                        justify-content flex-start
                        font-weight 700
                        span 
                            display inline-block
                            font-size .12rem
                            margin-right -.030rem
                            vertical-align bottom
                        em
                            display inline-block
                        
</style>